<template>
  <view class="content">
    <view class="title-box">
      <u-cell-group :border="false">
        <u-cell-item title="添加车辆" :border-bottom="false" :arrow="false"
          :title-style="{fontSize:'40rpx',fontWeight:700,color:'#000'}">
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="">
      <view class="dialog-row-license-box" @click="addLicenseDialog">
        <template v-for="(item,index) in this.form.licensePlate">
          <text v-if="item=='新能源'" :key='index' class="dialog-license new-energy" @click.stop="onBrandClick"
            :data-index='index'>{{item}}</text>
          <text v-else :key='index' class="dialog-license" :class="{'dialog-active': currentIndex===index}"
            :data-index='index'>{{item}}</text>
        </template>
      </view>
    </view>
	<u-cell-group :border="false" class="plate-color">
	  <u-cell-item title="车牌颜色" @click="seleOptionsBol=true" :border-bottom="false" :value="colorValue || '请选择' "
	    :value-style=" {color:'#3570d9'}">
	  </u-cell-item>
	</u-cell-group>
    <view class="add-plate mt-50 mb-50">
      <u-button type="primary" shape="circle" @click="addPlate">立即添加</u-button>
    </view>
    <view class="mt-20 mb-20 fs-24" style="color: #999;">
      请绑定真实有效的车牌号，否则将无法正常使用这项功能
    </view>
    
    <u-select v-model="seleOptionsBol" :list="seleOptions" @confirm="selctConfirm($event,'come')"></u-select>
    <cowain-add-licensee v-if="showLicenseDialog" @onCancel='cancelLicenseDialog' @onOk='okLicense' />
  </view>
</template>

<script>
  import cowainAddLicensee from "@/uni_modules/cowain-add-license/components/cowain-add-license/cowain-add-license.vue"

  import {
    vehicleAddApi
  } from '@/api/vehicleAdd.js'

  export default {
    components: {
      cowainAddLicensee
    },
    data() {
      return {
        form: {
          licensePlateColor: '',
          licensePlate: ['', '', '', '', '', '', '', '新能源'],
        },
        colorValue: '',
        seleOptionsBol: false,
        seleOptions: [],
        currentIndex: 0,
        showLicenseDialog: false,
      }
    },

    mounted() {
      this.getOptions();
    },

    computed: {
      isShowProvinceSelect() {
        return this.currentIndex === 0
      },
      isShowBrandSelect() {
        return this.currentIndex > 0;
      }
    },
    methods: {
      //获取车牌颜色字典
      getOptions() {
        console.log(this.$dictTools.dictList('LICENSE_PLATE_COLOR'))
        this.seleOptions = this.$dictTools.dictList('LICENSE_PLATE_COLOR').map(e => ({
          value: e.value,
          label: e.text
        }));
      },
      //显示添加车牌
      addLicenseDialog() {
        this.showLicenseDialog = true;
      },
      //取消添加车牌
      cancelLicenseDialog() {
        this.showLicenseDialog = false;
      },
      //添加车牌成功
      okLicense(license) {
        const arr = [...license]
        arr.forEach((e, index) => {
          this.form.licensePlate[index] = e
        })
        console.log(this.form.licensePlate = this.form.licensePlate.join(""), '车牌号输出')
      },

      //调用接口添加车牌信息
      addPlate() {
        if (this.colorValue == '') {
          this.$toast({
            title: "请选择车牌颜色",
          })
        } else {
          vehicleAddApi(this.form).then(respond => {
            console.log(respond)
            this.$toast({
              title: "添加成功！",
            })
            setTimeout(() => { //添加成功后定时返回上一界面
              uni.navigateBack({
                delta: 1
              })
            }, 1000)
          })
          console.log(this.form, '最终传送数据')
        }
      },

      selctConfirm(e) {
        this.colorValue = e[0].label;
        this.form.licensePlateColor = e[0].value
        console.log('车牌颜色和值', this.form.licensePlateColor, this.colorValue)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 0 30rpx;
    background-color: $-color-white;
    height: 100%;

    .plate-color {
      /deep/.u-cell-item-box {
        background-color: #ecf3fd;
        border-radius: 10rpx;

        .u-cell {
          padding: 10rpx 20rpx;
        }
      }
    }
  }

  .dialog-row-license-box {
    margin-top: 65rpx;
    margin-bottom: 50rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0 10rpx;

    .dialog-license {
      width: 64rpx;
      height: 78rpx;
      border-radius: 16rpx;
      border: 2rpx solid #DEDEDE;
      line-height: 78rpx;
      text-align: center;
      box-sizing: border-box;
      font-size: 38rpx;
      color: black;
      margin: 0 6rpx;

      &.new-energy {
        background: rgba(18, 191, 145, 0.04);
        border: 2rpx dashed rgba(23, 186, 142, 0.46) !important;
        color: #12BF91;
        border: 2rpx solid #80ADEB;
        font-size: 18rpx;
        writing-mode: vertical-rl;
        text-align: center;
        line-height: 60rpx;
      }
    }

  }

  .add-plate {
    width: 100%;
  }
</style>